<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=basePath %>leyuiyc/css/font.css">
    <link rel="stylesheet" href="<%=basePath %>leyuiyc/css/xadmin.css">
    <script type="text/javascript" src="<%=basePath %>leyuiyc/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath %>leyuiyc/js/xadmin.js"></script>
    <link rel="stylesheet" href="<%=basePath %>easyUploader/main.css">
</head>
<body>
<blockquote>

    <div id="uploader">
    </div>
</blockquote>

<script src="./easyUploader/easyUploader.jq.js"></script>
<script>
    var goodsId = sessionStorage.getItem("goodsId");
    var uploader = easyUploader({
        id: "uploader",
        accept: '.jpg,.png,.doc,.docx',
        action: 'goodsDetail/uploadLunboPics.do?goodsId='+goodsId,
        dataFormat: 'formData',
        maxCount: 5,//最大上传文件数
        maxSize: 3,//最大上传文件体积，单位M
        autoUpload: false,//不自动上传
        multiple: true,//是否开启多选上传
        data: null,//上传配置参数，依据dataFormat而不同
        beforeUpload: function (file, data, args) {
            /* dataFormat为formData时配置发送数据的方式 */
            data.append('token', '387126b0-7b3e-4a2a-86ad-ae5c5edd0ae6TT');
            data.append('otherKey', 'otherValue');

            /* dataFormat为base64时配置发送数据的方式 */
            // data.base = file.base;
            // data.token = '387126b0-7b3e-4a2a-86ad-ae5c5edd0ae6TT';
            // data.otherKey = 'otherValue';
        },
        onChange: function (fileList) {
            /* input选中时触发 */
        },
        onRemove: function (removedFiles, files) {
            console.log('onRemove', removedFiles);
        },
        onSuccess: function (res) {
            /**
             * 注意，接口调通不代表视图会展示成功，接口调通时视图要展示成功需要满足以下两点条件
             * 1. 返回数据必须由对象包裹，如 { code: 200, data: null }
             * 2. 必须有一个用于标识成功状态的属性，默认属性是code，默认成功属性值是200，配置项分别对应successKey和successValue，可视情况自行配置
             */
            //console.log('onSuccess', res);
            if (res.code == 200) { //上传成功
                /*移除sessionStorage*/
                sessionStorage.removeItem("goodsId");
                layui.layer.msg(res.msg, {icon: 6})
            }else {
                layui.layer.msg(res.msg,  {icon: 5});
            }

            /**
             * 可以在onSuccess/onError等回调函数中通过实例的files属性可以访问上传文件，如 var files = uploader.files; console.log一下就会发现files数组中每个元素由以下属性构成
             * 1. ajaxResponse: ajax的的响应结果
             * 2. base: 文件的base64编码
             * 3. checked: 该文件是否被选中
             * 4. file: 文件对象
             * 5. id: 插件内部标识的文件id
             * 6. isImg: 插件内部标识文件时否是图片
             * 7. previewBase: 文件压缩后的base64编码，用于插件内部展示预览图
             * 8. uploadPercentage: 文件上传进度百分比值
             * 9. uploadStatus: 文件上传状态
             */
        },
        onError: function (err) {
            console.log('onError', err);
            layui.layer.msg("系统异常"+err,  {icon: 5});
        },
    });
</script>

<%--

<form name="form1" action="Typgl/uploadFiles.do" method="post" ENCTYPE="multipart/form-data">
    <input id="File1" name="fileupload" accept="file/*.*" multiple="multiple" type="file" value="" />
    <input id="" type="submit" value="上传" />
</form>--%>
<%--
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    <div id="uploadImg" class="layui-upload">
        <button type="button" class="layui-btn" id="upload">
            <i class="layui-icon">&#xe67c;</i>上传轮播图<span style="color: red;font-size: 20px;">*</span>
        </button>
        <div style="color: #c2c2c2;margin:10px 0;">温馨提示: 每次最多上传六张图片, 单张图片的大小不超过5MB,
            推荐上传图片长530px,宽500px
        </div>
        <div class="layui-upload-list">
            <table class="layui-table" style="text-align: center;">
                <thead>
                <tr>
                    <th style="text-align: center;">图片预览</th>
                    <th style="text-align: center;">大小</th>
                    <th style="text-align: center;">状态</th>
                    <th style="text-align: center;">操作</th>
                </tr>
                </thead>
                <tbody id="imgList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="startUpload">开始上传</button>
    </div>
    <input type="text" name="face_img" id="imgInput" style="display: none;" lay-verify="required">
</blockquote>
<script type="text/javascript">
    layui.use(['table', 'form', 'element', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;

        //多文件列表示例
        var demoListView = $('#imgList');
        var totalArray = new Array();
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            , url: 'Typgl/uploadLunboPic.do' //上传接口
            , accept: 'images'  // 允许上传的文件类型
            // , acceptMime: 'image/jpg,image/png'   // (只支持jpg和png格式，多个用逗号隔开),
            , size: 5120        // 最大允许上传的文件大小  单位 KB
            , auto: false //选择文件后不自动上传
            , bindAction: '#startUpload' //指向一个按钮触发上传
            , multiple: true   // 开启多文件上传
            , number: 6    //  同时上传文件的最大个数
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                var arr = Object.keys(files);

                console.log(arr)
                // 检查上传文件的个数
                if (arr.length <= 6) {
                    totalArray = arr;
                    console.log('1')
                    console.log(totalArray)
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width:100px;height:106px"></td>'
                            , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                            , '<td>等待上传</td>'
                            , '<td>'
                            , '<button class="layui-btn demo-reload layui-hide">重传</button>'
                            , '<button class="layui-btn layui-btn-danger demo-delete">删除</button>'
                            , '</td>'
                            , '</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //删除对应的文件 delete:删除后，该下标位置元素为undefined
                            totalArray.splice(index, 1); //splice：删除后，后面的元素自动填补到前面
                            tr.remove();
                            uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            console.log('2')
                            console.log(totalArray)
                        });

                        demoListView.append(tr);
                    });
                } else {
                    console.log('3')
                    console.log(totalArray)
                    // 超出上传最大文件
                    layer.msg("上传文件最大不超过6个")
                }

            }
            , done: function (res, index, upload) { ////每个文件提交一次触发一次。详见“请求成功的回调”
                console.log("res", res);
                if (res.code == 0) { //上传成功
                    // 上传成功后将图片路径拼接到input中，多个路径用","分割
                    var inputVal = document.getElementById("imgInput").value;
                    var valData = "";
                    if (inputVal) {
                        valData = inputVal + "," + res.data[0];
                    } else {
                        valData = res.data[0];
                    }
                    document.getElementById("imgInput").value = valData;
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作

                    console.log('imgInput',$('#imgInput').val())
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                console.log(obj.total); //得到总文件数
                console.log(obj.successful); //请求成功的文件数
                console.log(obj.aborted); //请求失败的文件数
            }
            , error: function (index, upload) { //当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
    });

</script>--%>
</body>
</html>
